<template>
  <div id="app" :style="{height:screenHeight}">
    <el-container>
      <el-header>
        <div style="height:60px;width:100%">
          <div class="header-bt">
            <el-button-group>
              <el-button type="primary" icon="el-icon-download" @click="exportXml">导出</el-button>
              <el-button type="primary" icon="el-icon-upload2" @click="importXml">导入</el-button>
            </el-button-group>
          </div>
          <div class="header-title">
            ESTDesigner流程设计器工具-VUE版
          </div>
        </div>
      </el-header>
      <el-container>
        <el-aside width="220px">
          <node-bar @addNode="handleAddNode" />
        </el-aside>
        <el-main>
          <draggable class="" v-bind="{group:{ name:'people', put:false}, ghostClass: 'ghost',animation: 200,sort:false}">
            <div id="paintarea" onselectstart="javascript:/*IE8 hack*/return false" class="paint-area">
            </div>
          </draggable>
        </el-main>
      </el-container>
      <el-footer height="25px">
        Powered by 大连逻辑向量科技有限公司
      </el-footer>
    </el-container>
    <el-dialog ref="propDialog" v-if='dialogVisible' :visible.sync="dialogVisible" :close-on-click-modal="false" width="70%">
      <template slot="title">
        <i class="el-icon-setting"></i>{{dialogTitle}}
      </template>
      <router-view></router-view>
    </el-dialog>
  </div>
</template>
<script>
import { mapActions, mapGetters } from "vuex";
import NodeBar from "./components/NodeBar";
import Draggable from "vuedraggable";

import Canvas from "./components/Canvas";
import { createTask } from "./components/Task";
import Event from "./components/Event";
import Container from "./components/Container";
import Gateway from "./components/Gateway";

export default {
  name: "App",
  data() {
    return {
      screenHeight: "",
      tabContentHeight: "",
      tabContentWidth: "",
      activeName: "workflow",
      canvas: null,
      modelType: "",
      dialogTitle: "",
      dialogVisible: false,
      xml: ""
    };
  },
  components: {
    "node-bar": NodeBar,
    Draggable
  },
  computed: {},
  created() {},
  mounted() {
    this.init();
  },
  watch: {},
  methods: {
    ...mapActions([
      "loadCanvas",
      "setProcess",
      "setSelectedTask",
      "setSelectedConnection",
      "setSubProcess"
    ]),
    init() {
      let _this = this;
      this.screenHeight = document.documentElement.clientHeight - 20 + "px";
      this.tabContentHeight =
        document.documentElement.clientHeight - 200 + "px";
      this.tabContentWidth = document.documentElement.clientWidth - 400 + "px";
      let canvas = new Canvas.render("paintarea");

      $("#paintarea")
        .children("svg")
        .css("position", "inherit");

      this.canvas = canvas;
      let start = new Event.Start();
      let end = new Event.End();
      canvas.add(start, 100, 50);
      canvas.add(end, 100, 400);
      this.bindContextMenu();
      this.loadCanvas(this.canvas);
    },
    bindContextMenu() {
      this.bindCanvasContextMenu();
      this.bindTaskContextMenu();
      this.bindConnectionContextMenu();
      this.bindSubProcessContextMenu();
    },
    bindCanvasContextMenu() {
      let self = this;
      //注册canvas右键菜单处理回调函数
      this.canvas.callback = function(evt) {
        //console.log("canvas事件", evt.process);
        //self.modelType = "process";
        self.dialogVisible = true;
        self.dialogTitle = "流程属性";
        self.setProcess(self.canvas.process);
        self.$router.replace({
          name: "processProp",
          params: {}
        });
      };
    },
    bindTaskContextMenu() {
      let self = this;
      this.canvas.taskCallback = function(task, key) {
        self.dialogVisible = true;
        self.setSelectedTask(task);
        switch (task.type) {
          case "ESTDesigner.task.UserTask":
            self.dialogTitle = "User Task属性";
            self.$router.replace({ name: "userTaskProp" });
            break;
          case "ESTDesigner.task.ManualTask":
            self.dialogTitle = "Manual Task属性";
            self.$router.replace({ name: "manualTaskProp" });
            break;
          case "ESTDesigner.task.ServiceTask":
            self.dialogTitle = "Service Task属性";
            self.$router.replace({ name: "serviceTaskProp" });
            break;
          case "ESTDesigner.task.ScriptTask":
            self.dialogTitle = "Script Task属性";
            self.$router.replace({ name: "scriptTaskProp" });
            break;
          case "ESTDesigner.task.ReceiveTask":
            self.dialogTitle = "Receive Task属性";
            self.$router.replace({ name: "recieveTaskProp" });
            break;
          case "ESTDesigner.task.MailTask":
            self.dialogTitle = "Mail Task属性";
            self.$router.replace({ name: "mailTaskProp" });
            break;
          case "ESTDesigner.task.BusinessRuleTask":
            self.dialogTitle = "Business Rule Task属性";
            self.$router.replace({ name: "businessRuleTaskProp" });
            break;
          case "ESTDesigner.task.CallActivityTask":
            self.dialogTitle = "Call Activity Task属性";
            self.$router.replace({ name: "callActivityTaskProp" });
            break;
          default:
            break;
        }
      };
    },
    bindConnectionContextMenu() {
      let self = this;
      this.canvas.connectionCallback = function(connection) {
        console.log("获取线属性", connection);
        self.dialogVisible = true;
        self.dialogTitle = "Connection属性";
        self.setSelectedConnection(connection);
        self.$router.replace({ name: "connectionProp" });
      };
    },
    bindSubProcessContextMenu() {
      let self = this;
      this.canvas.containerCallback = function(subProcess) {
        self.dialogVisible = true;
        self.dialogTitle = "子流程属性";
        self.setSubProcess(subProcess);
        self.$router.replace({
          name: "subProcessProp"
        });
      };
    },
    handleAddNode(evt) {
      //console.log("addNode", evt);
      let node = evt.item;
      let modelType = node.dataset.model;
      let model = this.createModel(modelType);
      if (model != null) {
        //let offsetWidth = node.offsetWidth;
        //let offsetHeight = node.offsetHeight;
        let cvx = this.canvas.getAbsoluteX();
        let cvy = this.canvas.getAbsoluteY();
        let scrollLeft = this.canvas.getScrollLeft();
        let scrollTop = this.canvas.getScrollTop();
        //console.log(cvx, cvy, scrollLeft, scrollTop);
        let x = evt.originalEvent.clientX - cvx + scrollLeft;
        let y = evt.originalEvent.clientY - cvy + scrollTop;
        //console.log(x, y);
        this.canvas.add(model, x, y);
      }
    },
    evil(js) {
      let fn = Function;
      return new fn("return " + js);
    },
    createModel(type) {
      //console.log("task类型", type, type.indexOf("Task."));
      if (type.indexOf("Task.") != -1) {
        return createTask(type);
      } else {
        if (type === "Event.Start") {
          return new Event.Start();
        }
        if (type === "Event.End") {
          return new Event.End();
        }
        if (type === "Gateway.Parallel") {
          return new Gateway.ParallelGateway();
        }
        if (type === "Gateway.Exclusive") {
          return new Gateway.ExclusiveGateway();
        }
        if (type === "Task.SubProcess") {
          return new Container.SubProcess();
        }
      }
      return null;
    },
    exportXml() {
      this.dialogVisible = true;
      this.dialogTitle = "导出XML";
      this.$router.replace({
        name: "export"
      });
    },
    importXml() {
      this.dialogVisible = true;
      this.dialogTitle = "导入XML";
      this.$router.replace({
        name: "import"
      });
    }
  }
};
</script>

<style>
.home {
  overflow: hidden;
}
.paint-area {
  background: url(/static/imgs/background.png);
  height: 750px;
  width: 1600px;
}
.el-container {
  height: 100%;
}
.el-header {
  background-color: #67c23a;
  color: #ffffff;
  text-align: center;
}

.el-aside {
  background-color: #ebeef5;
  color: #333;
  text-align: center;
  line-height: 100%;
}

.el-main {
  background-color: #ebeef5;
  color: #333;
  text-align: center;
}
.header-bt {
  float: left;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 15%;
  align-items: center;
}
.header-title {
  float: left;
  display: flex;
  justify-content: center;
  height: 100%;
  width: 85%;
  align-items: center;
}
.el-footer {
  background-color: #67c23a;
  color: #ffffff;
  text-align: center;
}
.footer-title {
  display: flex;
  justify-content: center;
  height: 100%;
  width: 85%;
  align-items: center;
}
</style>
